<template>
  <div class="user-profile-container">
    <BgCarousel />

    <div class="profile-user-info">
      <el-avatar class="user-avatar" :size="100" :src="userStore.userProfile.avatar" />

      <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label="t('profile.info.overview')" name="overview" />
        <el-tab-pane :label="t('profile.info.basicInfo')" name="basicInfo" />
        <el-tab-pane :label="t('profile.info.systemPersonalize')" name="systemPersonalize" />
      </el-tabs>
    </div>
  </div>

  <Overview v-if="activeName === 'overview'" />
  <BasicConfig v-if="activeName === 'basicInfo'" />
  <SystemPersonalize v-if="activeName === 'systemPersonalize'" />
</template>

<script setup lang="ts" name="Profile">
import { useUserStore } from '@/store/modules/user'
import BgCarousel from './components/BgCarousel.vue'
import Overview from './components/Overview/index.vue'
import BasicConfig from './components/BasicConfig/index.vue'
import SystemPersonalize from './components/SystemPersonalize/index.vue'

const { t } = useI18n()
const userStore = useUserStore()

const activeName = ref('overview')
</script>

<style lang="scss" scoped>
.user-profile-container {
  margin: calc(0px - var(--sys-admin-right-padding));
  margin-bottom: 24px;
}

.profile-user-info {
  position: relative;
  height: 48px;
  margin-bottom: 15px;
  background: var(--cjui-bg-color-content);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);

  .user-avatar {
    position: absolute;
    bottom: 20px;
    left: 30px;
    border: 4px solid var(--cjui-bg-color-content);
  }

  :deep(.el-tabs) {
    margin-left: 240px;
  }
}
</style>
